<template>
  <div class="ip-authorization">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>IP授权管理</span>
        </div>
      </template>

      <!-- 添加IP表单 -->
      <el-form :inline="true" @submit.prevent="handleAddIP">
        <el-form-item label="IP地址">
          <el-input 
            v-model="newIP.ip" 
            placeholder="请输入IP地址"
          />
        </el-form-item>
        <el-form-item label="描述">
          <el-input 
            v-model="newIP.description" 
            placeholder="请输入描述信息"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddIP">添加IP</el-button>
        </el-form-item>
      </el-form>

      <!-- IP列表 -->
      <el-table 
        :data="ipList" 
        v-loading="loading"
        style="width: 100%; margin-top: 16px"
      >
        <el-table-column prop="ip" label="IP地址" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.enabled"
              @change="(val) => handleToggleStatus(row.id, val)"
            />
          </template>
        </el-table-column>
        <el-table-column label="最后访问时间" width="180">
          <template #default="{ row }">
            {{ row.lastAccess ? formatDate(row.lastAccess) : '从未访问' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-popconfirm
              title="确定要删除这个IP吗？"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editModalVisible"
      title="编辑IP信息"
      width="500px"
    >
      <el-form :model="editingIP" label-width="80px">
        <el-form-item label="IP地址">
          <el-input v-model="editingIP.ip" disabled />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editingIP.description" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="editingIP.enabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editModalVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

export default defineComponent({
  name: 'IPAuthorization',
  setup() {
    const ipList = ref([])
    const loading = ref(false)
    const editModalVisible = ref(false)
    const editingIP = ref({})
    const newIP = ref({
      ip: '',
      description: ''
    })

    // 加载IP列表
    const loadIPList = async () => {
      loading.value = true
      try {
        const response = await axios.get('/api/auth/ips')
        ipList.value = response.data
      } catch (error) {
        ElMessage.error('加载IP列表失败')
        console.error('加载IP列表失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 添加IP
    const handleAddIP = async () => {
      if (!newIP.value.ip) {
        ElMessage.warning('请输入IP地址')
        return
      }

      try {
        await axios.post('/api/auth/ips', newIP.value)
        ElMessage.success('添加IP成功')
        newIP.value = { ip: '', description: '' }
        loadIPList()
      } catch (error) {
        ElMessage.error('添加IP失败')
        console.error('添加IP失败:', error)
      }
    }

    // 切换IP状态
    const handleToggleStatus = async (id, enabled) => {
      try {
        await axios.put(`/api/auth/ips/${id}`, { enabled })
        ElMessage.success('更新状态成功')
        loadIPList()
      } catch (error) {
        ElMessage.error('更新状态失败')
        console.error('更新状态失败:', error)
      }
    }

    // 编辑IP
    const handleEdit = (record) => {
      editingIP.value = { ...record }
      editModalVisible.value = true
    }

    // 提交编辑
    const handleEditSubmit = async () => {
      try {
        await axios.put(`/api/auth/ips/${editingIP.value.id}`, {
          description: editingIP.value.description,
          enabled: editingIP.value.enabled
        })
        ElMessage.success('更新成功')
        editModalVisible.value = false
        loadIPList()
      } catch (error) {
        ElMessage.error('更新失败')
        console.error('更新失败:', error)
      }
    }

    // 删除IP
    const handleDelete = async (id) => {
      try {
        await axios.delete(`/api/auth/ips/${id}`)
        ElMessage.success('删除成功')
        loadIPList()
      } catch (error) {
        ElMessage.error('删除失败')
        console.error('删除失败:', error)
      }
    }

    // 格式化日期
    const formatDate = (date) => {
      return new Date(date).toLocaleString()
    }

    onMounted(() => {
      loadIPList()
    })

    return {
      ipList,
      loading,
      newIP,
      editModalVisible,
      editingIP,
      handleAddIP,
      handleToggleStatus,
      handleEdit,
      handleEditSubmit,
      handleDelete,
      formatDate
    }
  }
})
</script>

<style scoped>
.ip-authorization {
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 